<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <style>
    a{text-decoration: none; color: #000;}
    img{display: block; width: 100%; display: block;}
    *{margin: 0; padding: 0;}
    /* 头部 */
    /* 导航 */
    #banner{width: 100%; height: 600px; background: url(./img/one.jpg) 40px; background-size: cover;}
    .banner{line-height: 80px;}
    #rightbanner{float: left; width: 20%; margin-left: 15%; color: #6AB743;}
    #rightbanner img{float: left; width: 40px; height: 40px; margin-top: 20px; margin-right: 10px;}
    .banner nav{float: left; width: 60%;}
    .banner nav a{float: left; width: 15%; text-align: center; display: block; color: #FFF; font-weight: bold;}
    /* 中心黑方块 */
    #zhongxin{padding-top: 150px;}
    .zhongXin{height: 300px; width: 500px; background-color: rgba(0,0,0,0.3); text-align: center; margin: 0 auto;color: #fff;}
    .zhongOne{font-size: 2.5rem; line-height: 9rem;}
    .zhongTwo{font-size: 1.5rem;}
    .zhongThree{font-size: 1.5rem; line-height: 7rem;}
    /* 关于我们 */
    #about{width: 100%;}
    .leftAbout{width: 35%; padding-left: 15%; float: left; background-color: #6AB743; color: #fff; height: 400px;}
    .leftA{margin-top: 30px; font-size: 1.5rem;}
    .leftB{font-size: 2rem;}
    .leftE{background-color: #fff; width: 50px; height: 3px; margin: 15px 0 20px 0;}
    .leftC{text-indent: 2rem;}
    .leftD{border: 1px #fff solid; padding: 5px 20px; margin-top: 40px; display: inline-block; color: #fff;}
    .rightAbout{width: 50%; height: 400px;}
    /* 案例展示 */
    #case{width: 70%; margin: 0 auto; margin-top: 50px;}
    .caseA{font-size: 1.5rem;}
    .caseB{font-size: 2rem;}
    .caseC{background-color: #000; width: 50px; height: 3px; margin: 15px 0 50px 0;}
    .casee{border: 1px #000 solid; height: 500px;}
    .baileft{float: left; width: 25%;}
    .baileftImg{height: 500px;}
    .weileft{width: 30%; height: 250px; float: left;}
    .weileftImg{height: 250px;}
    .weiright{float: left; width: 45%;}
    .weirightImg{height: 250px;}
    .haoleft{float: left; width: 45%;}
    .haoleftImg{height: 250px;}
    .haoright{float: left; width: 30%;}
    .haorightImg{height: 250px;}
    /* 图层 */
    .casee{position: relative;}
    .baileftWord{position: absolute; top: 0; width: 21%; border: 3px #6AB642 solid; height: 460px; margin: 20px 2%; box-sizing: border-box;}
    .baileftWords{background-color: rgba(0,0,0,0.5); padding: 30px 10px; margin: 30px 10px; color: #fff; width: 70%;}
    .zhuFang{line-height: 2rem;}
    .ziMu{font-size: 0.8rem;}
    .weirightWord{position: absolute; top: 0; right: 2%; background-color: rgba(0,0,0,0.5); text-align: right; padding: 30px 10px; margin: 40px 10px; color: #fff;}
    .haoleftWord{position: absolute; bottom: 0; left: 27%; background-color: rgba(0,0,0,0.5); padding: 30px 10px; margin: 40px 10px; color: #fff;}
    .haorightWord{position: relative; bottom: 250px; right: 0; background-color: rgba(0,225,0,0.4); height: 235px; width: 95%; color: #fff; padding-top: 5%; padding-left: 5%;}
    .haorightWords{width: 90%; height: 90%; border: 3px #fff solid; text-align: center;}
    .haorightWordshu{font-size: 2rem; margin-top: 60px;}
    /* 主题 */
    #head{background: url(./img/微信图片_20220912201547.jpg) 50px; background-size: cover; height: 600px; margin-top: 150px;}
    .head{color: #fff; width: 70%; margin: 0 auto;}
    .headA{font-size: 1.5rem;}
    .headB{font-size: 2rem;}
    .headC{background-color: #fff; width: 50px; height: 3px; margin: 15px 0 50px 0;}
    .header{width: 70%; margin: 0 auto; height: 300px; background-color: #fff;}
    .headImg{width: 20%; display: block; margin-left: 40%;}
    .headers{width: 25%; text-align: center; padding-top: 70px; color: #7B7B7B; float: left;}
    .headOne{font-size: 1.2rem; font-weight: bold; line-height: 3rem; color: #323332;}
    /* 家庭课堂 */
    #ClassroomWord{font-size: 4rem; text-align: center; font-weight: bold; line-height: 15rem;}
    .Classroom{width: 70%; margin: 0 auto; height: 580px; box-shadow: 1px 1px 5px 3px rgb(156, 155, 155); border-radius: 10px;}
    .ClassroomLeft{float: left; width: 49%;}
    .ClassroomImg{width: 100%; height: 350px; border-radius: 10px 10px 0 0;}
    .ClassroomRight{width: 49%; float: right;}
    .ClassroomWord{color: #686868; padding: 10px 50px; font-size: 1.2rem;}
    .ClassroomWord a{display: block; padding: 20px; border-bottom: 1px #D0D0D0 solid;}
    .ClassroomWord a:hover{color: #69B744;}
    .ClassroomWord a:nth-child(3){border-bottom: none;}
    /* 尾部 */
    #footer{background-color: #2B2B2B; color: #fff;}
    .footer{text-align: center; line-height: 4rem; height: 4rem;}
    #foot{background-color: #373737; height: 300px; width: 100%; margin-top: 100px;}
    .foot{width: 70%; margin: 0 auto;}
    .footleft{width: 15%; padding: 30px 0; float: left;}
    .footleft a{display: block; color: #fff; line-height: 2rem;}
    .footleft a:first-child{font-size: 1.2rem; line-height: 3rem;}
    .footleft img{width: 130px; padding: 30px 0;}
    .footleft p{color: #fff;}
    .footright{padding: 60px 0;}
    .footright p{color: #fff;}
    .footright p:nth-child(2){font-size: 2rem; line-height: 5rem;}
  </style>
</head> 
<body>
  <div id="box">
    <!-- banner -->
    <div id="banner">
      <div class="banner">
        <div id="rightbanner">
          <img src="./img/jia.png" alt="">
          <p>绿色小屋</p>
        </div>
        <nav>
          <a href="./index.html">首页</a>
          <a href="./Two.html">精品示范</a>
          <a href="./Three.html">装修风格</a>
          <a href="./Four.html">产品展示</a>
          <a href="./Five.html">家装定制</a>
          <a href="./Six.html">关于我们</a>            
        </nav>
      </div>
      <div id="zhongxin">
        <div class="zhongXin">
          <p class="zhongOne">打造品质生活</p>
          <p class="zhongTwo">细节凸显品质</p>
          <p class="zhongThree">Enjoy the luxury of light of life</p>
        </div>
      </div>
    </div>
    <!-- 关于我们 -->
    <div id="about">
      <div class="about">
        <div class="leftAbout">
          <p class="leftA">ABOUT US</p>
          <p class="leftB">关于我们</p>
          <div class="leftE"></div>
          <p class="leftC">绿色小屋装饰有限公司绿色小屋装饰有限公司，始创于2002年，总部座落于杭州，是一家以“设计为入口、工程为基石”的大家居集成化服务商。</p>
          <p class="leftC">历经19年发展，绿色小屋装饰已成为拥有品牌“绿色装饰、 绿色装饰精工装、绿色金义产业园”等服务于一体的集团化企业，致力于打造一个一站式整装连锁平台。</p>
          <a href="#" class="leftD">了解更多></a>
        </div>
        <img src="./img/Two.jpg" class="rightAbout" alt="">
      </div>
    </div>
    <!-- 案例展示 -->
    <div id="case">
      <div class="case">
        <p class="caseA">CASE</p>
        <p class="caseB">案例展示</p>
        <p class="caseC"></p>
      </div>
      <div class="casee">
        <div id="bai">
          <div class="baileft">
            <img class="baileftImg" src="./img/photo-1618220179428-22790b461013.jpg" alt="">
            <div class="baileftWord">
              <div class="baileftWords">
                <p>BED ROOM</p>
                <p>SERIES</p>
                <p>EUROPE</p>
                <p class="zhuFang">客厅区</p>
                <p class="ziMu">NORTHERN EUROPE</p>
              </div>
            </div>
          </div>
          <div class="biaright">
            <div id="wei">
              <div class="weileft">
                <img class="weileftImg" src="./img/1629440764492.jpg" alt="">
              </div>
              <div class="weiright">
                <img class="weirightImg" src="./img/1629440488700.jpg" alt="">
                <div class="weirightWord">
                  <div class="weirightWords">
                    <p>BED ROOM</p>
                    <p>SERIES</p>
                    <p>EUROPE</p>
                    <p class="zhuFang">卧房区</p>
                    <p class="ziMu">NORTHERN EUROPE</p>
                  </div>
                </div>
              </div>
            </div>
            <div id="hao">
              <div class="haoleft">
                <img class="haoleftImg" src="./img/1629440488700.jpg" alt="">
                <div class="haoleftWord">
                  <div class="haoleftWords">
                    <p>BED ROOM</p>
                    <p>SERIES</p>
                    <p>EUROPE</p>
                    <p class="zhuFang">卧房区</p>
                    <p class="ziMu">NORTHERN EUROPE</p>
                  </div>
                </div>
              </div>
              <div class="haoright">
                <img class="haorightImg" src="./img/1629440764492.jpg" alt="">
                <div class="haorightWord">
                  <div class="haorightWords">
                    <p class="haorightWordshu">书房区</p>
                    <p>STUDY ROOM</p>                    
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 主题 -->
    <div id="head">
      <div class="head">
        <p class="headA">CASE</p>
        <p class="headB">案例展示</p>
        <p class="headC"></p>
      </div>
      <div class="header">
        <div class="headers">
          <img class="headImg" src="./img/cao.png" alt="">
          <p class="headOne">快捷安装</p>
          <p class="headTwo">家装服务保障承诺</p>
          <p class="headThree">利益客户，温暖千万家</p>
        </div>
        <div class="headers">
          <img class="headImg" src="./img/cao.png" alt="">
          <p class="headOne">健康选材</p>
          <p class="headTwo">家装服务保障承诺</p>
          <p class="headThree">利益客户，温暖千万家</p>
        </div>
        <div class="headers">
          <img class="headImg" src="./img/cao.png" alt="">
          <p class="headOne">智能节水</p>
          <p class="headTwo">家装服务保障承诺</p>
          <p class="headThree">利益客户，温暖千万家</p>
        </div>
        <div class="headers">
          <img class="headImg" src="./img/cao.png" alt="">
          <p class="headOne">加厚质感</p>
          <p class="headTwo">家装服务保障承诺</p>
          <p class="headThree">利益客户，温暖千万家</p>
        </div>
      </div>
    </div>
    <!-- 家庭课堂 -->
    <div id="ClassroomWord">家庭课堂</div>
    <div id="Classroom">
      <div class="Classroom">
        <div class="ClassroomLeft">
          <img class="ClassroomImg" src="./img/1629439717127.jpg" alt="">
          <ul class="ClassroomWord">
            <a href="#">再好的学区房，也不如家里的书房</a>
            <a href="#">再好的学区房，也不如家里的书房</a>
            <a href="#">再好的学区房，也不如家里的书房</a>
          </ul>
        </div>
        <div class="ClassroomRight">
          <img class="ClassroomImg" src="./img/1629439717127.jpg" alt="">
          <ul class="ClassroomWord">
            <a href="#">再好的学区房，也不如家里的书房</a>
            <a href="#">再好的学区房，也不如家里的书房</a>
            <a href="#">再好的学区房，也不如家里的书房</a>
          </ul>
        </div>
      </div>
    </div>
    <!-- 尾部 -->
    <div id="foot">
      <div class="foot">
        <ul class="footleft">
          <a href="#">关于我们</a>
          <a href="#">企业介绍</a>
          <a href="#">联系我们</a>
          <a href="#">企业招聘</a>
        </ul>
        <ul class="footleft">
          <a href="#">案例展示</a>
          <a href="#">工地鉴赏</a>
          <a href="#">装修实景</a>
          <a href="#">精品案例</a>
        </ul>
        <ul class="footleft">
          <a href="#">装修服务</a>
          <a href="#">新房装修</a>
          <a href="#">老房改造</a>
          <a href="#">别墅大宅</a>
          <a href="#">皇冠工程</a>
        </ul>
        <div class="footleft">
          <img src="./img/erweima.png" alt="">
          <p>免费领取户型规划</p>
        </div>
        <div class="footright">
          <p>全国服务热线:</p>
          <p>400- 888-8888</p>
          <p>地址:中国(. 上海)自由贸易试验区碧波路690号1幢402- 1室</p> 
        </div>
      </div>
    </div>
    <div id="footer">
      <div class="footer">绿色小屋装饰有限公司版权所有C2021 (沪)xxx证xXXxx号 使用前必读</div>
    </div>
  </div>
</body>
</html>